﻿@page "/MultiSelect-Dropdown/Custom-Value"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the custom value functionalities of the MultiSelect. Type a character(s) in the MultiSelect element that are not present in the dataSource, you can select and tag that custom typed characters as new item from the suggestion list.</p>
</SampleDescription>
<ActionDescription>
   <p>The MultiSelect allows the user to add a non-present option to the component value when the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_AllowCustomValue' target='_blank'> AllowCustomValue</a> is enabled. While selecting new custom value the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-1.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_1_CustomValueSpecifier' target='_blank'> CustomValueSelection</a> event will be triggered.</p>
   <p>More information on the custom value feature can be found in the<a href='https://blazor.syncfusion.com/documentation/multiselect-dropdown/custom-value/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <SfMultiSelect TValue="string[]" TItem="Countries" Placeholder="Select countries" DataSource="@Country" AllowCustomValue="true" Mode="@VisualMode.Box">
            <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
        </SfMultiSelect>
    </div>
</div>

@code{
    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    private List<Countries> Country = new List<Countries>
{
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };
}

<style>
    .control_wrapper {
        width: 350px;
        margin: 0 auto;
        padding-top: 70px;
    }
</style>